import xs from 'xstream'
import { button, a } from '@cycle/dom';

export function App (sources) {
  const vtree$ = xs.of(
    <div>My Awesome Spray Lee</div>
  )
  const sinks = {
    DOM: vtree$
  }
  return sinks
}


export function App1 (source) {
  return { DOM: xs.of(
    <h3>Spray Lee</h3>
  ) }
}

export function App2 (source) {
  return {
    DOM: source.DOM.select('input').events('click').map(e => e.target.checked).startWith(false).map(toggled => (
      <div>
        <input type="checkbox"/>Click Me
        <p>{ toggled ? 'ON' : 'OFF' }</p>
      </div>
    ))
  }
}

export function App3 (source) {
  return {
    DOM: xs.periodic(10).map(i => (
      <h1>{i} seconds slapsed</h1>
    ))
  }
}

export function App4 (source) {
  const length = 10
  console.log(source.DOM.select('.item'));
  
  return {
    DOM: source.DOM.select('.item').events('click').map(i => {
      console.log(i);
      return i

    }).map((e, i) => i).startWith(-1).map(index => (
      <section>
        <header>Current Item Is: { index > -1 ? index : 'null' }</header>
        { 
          [...Array(length)].map((a, i) => (
            <div className='item'>The  Item</div>
          ))
        }
      </section>
    ))
  }
}

export function App5 (source) {

  const httpRes$ = source.HTTP.select('test').flatten()
  const list = []
  httpRes$.addListener({
    next: res => list.push(res.status),
    err: res => console.log(res),
  })
  return {
    DOM: httpRes$.mapTo(200).map(i => (
      list.map(a => (
        <p>info {a}</p>
      ))
    )),
    HTTP: xs.periodic(2000).mapTo({ url: 'http://lijun.im/icon', method: 'GET', category: 'test' })
  }
}

export function App6 ({ DOM, HTTP }) {
  const click$ = DOM.select('input').events('click')
  const res$ = HTTP.select('test').flatten().map(res => res.status).startWith(null)
  return {
    DOM: res$.map(status => (
      <section>
        <input type="button" value="icon"/>
        {!status ? null : (
          <p>status: {status}, time: {Date.now()}</p>
        )}
      </section>
    )),
    HTTP: click$.map(i => ({ url: 'http://lijun.im/icon', method: 'GET', category: 'test' }))
  }
}

export function App7 ({ DOM }) {
  const count$ = xs.merge(
    DOM.select('.decrement').events('click').mapTo(-1),
    DOM.select('.increment').events('click').mapTo(1)
  ).fold((x, y) => x + y, 0)
  return {
    DOM: count$.map(count => (
      <section>
        <input type="button" className="decrement" disabled={count<=0?true:false} value="-"/>
        <span>{ count }</span>
        <input type="button" className="increment" value="+"/>
      </section>
    ))
  }
}

export function App8 ({ DOM }) {
  const data$ = xs.combine(
    DOM.select('.weight-input').events('input').map(e => e.target.value).startWith(65),
    DOM.select('.height-input').events('input').map(e => e.target.value).startWith(150)
  )
  return {
    DOM: data$.map(([ weight, height ]) => (
      <section>
        <div>
          <span>Weight: {weight} kg</span>
          <input type="range" className="weight-input" value={weight} min={40} max={150}/>
        </div>
        <div>
          <span>Height: {height} cm</span>
          <input type="range" className="height-input" value={height} min={120} max={200}/>
        </div>
        <p>Rati: {weight/height}</p>
      </section>
    ))
  }
}


export function MouthOrgan ({ DOM }) {

  const list = [ 'C', '#C', 'D', '#D', 'E', 'F', '#F', 'G', '#G', 'A', '#A', 'B' ]
  const change$ = DOM.select('.control').events('mousewheel').map(e => (e.wheelDelta || e.detail) > 0 ? 1 : -1)
  const data$ = change$.fold((x, y) => (x + y) > 11 ? 11 : (x + y) < 0 ? 0 : (x + y), 0).map(i => {
    console.log(i)
    return  i
  })
  return {
    DOM: data$.map(index => (
      <section>
        <div className="control">
          <span>1=</span>
          <div className="mark">
            <div className="list" style={{ transform: `translateY(${-100*index}%)` }}>
              {list.map((text, i) => (
                <span>{ text }</span>
              ))}
            </div>
          </div>
        </div>
        <main>
          <span>{list[index] }</span>
        </main>
      </section>
    ))
  }
}